最近体验了两款睡眠检测应用:Sleep Cycle和AutoSleep
- Sleep Cycle荣获App Store编辑精选,它可通过用户的声音或者睡眠时身体的移动频率来监测睡眠质量;
- AutoSleep则更直接,它是利用佩戴在用户手腕上的Apple Watch,获得用户睡眠时的动作来监测睡眠。
从我个人对于它们睡眠检测的结果对比来说,两个应用的监测效果不相上下。
虽然两个应用在监测算法上都很牛,但是在产品的功能和界面上,却非常不同:- Sleep Cycle简洁易懂,界面十分清楚明白;
- AutoSleep复杂晦涩,界面过分专业甚至还有点变态。
下面我们来分析下这两款应用的界面设计,以便从中吸取经验教训。 重点信息提炼
这类工具的一大特点,是每天早上都会使用,但又不会使用太久。基本就是早晨起来lou一眼,快速了解昨晚的睡眠信息即可。睡眠的信息有很多个:何时入睡?何时醒来?睡着了多久?睡的整体怎么样?有多长是深度睡眠?多长是浅睡眠?心率是多少?在实际的工作中,产品经理也会经常提过来包含着一堆信息的需求。作为设计师,很重要的一个工作就是对这些信息进行分类、梳理优先级,然后安排在页面的不同位置上。
在这一点上,Sleep Cycle明显做得要好的多:首页把用户最关心的睡眠质量(下图橙色圆环)提取出来,在旁边用最大的字号展示在床上的时间和实际的睡眠时间。界面头部的3个数据,很好的将昨晚睡眠的总体信息勾勒出来。接着是一个睡眠程度的曲线图,可以看到昨晚睡眠深浅的变化趋势(如下左图👇)对于AutoSleep,则要拙劣了很多:界面用一个柱形图,展现了昨晚睡眠深浅的变化,以及心率的变化。另外,右下角红框处还有一个不明信息:8:16 / 8:41。看到这两个数字,我的第一反应是「睡眠时长」,但既然是睡眠时长,为什么会有两个数字?这就让这个信息变得耐人寻味起来。这两个数字虽然只占了一小块地方,但这里是首页头部最黄金的位置。在这么好的地方呈现一个让人get不到的的信息,实在很影响界面设计的品质。在信息呈现上,Sleep Cycle使用了图标+数字的形式,展现了应用监测到的各项指标,而AutoSleep使用了一个个大圆盘来展现:两个应用由于各自优势不同,所以在一定程度上决定了两个应用在这里的展现不同:Sleep Cycle可以监测用户睡眠时发出的声音,所以它的界面把「其它指标」部分用图标+数字这样最简单的形式展现。因为本身它能提供的相关数据也不复杂,而且这样展现,可以节省空间,为应用的特色功能:记录用户睡眠的声音留下更多空间。对于AutoSleep,它是一个需要付费25元的睡眠检测应用,用户付了钱,总得让用户感觉这个应用很牛X,才会觉得值吧。
AutoSleep用这些大圆环,增加了界面的专业感,但问题是圆环这种形式,比较适合展现程度或者百分比,比如下图这些就还好:但是下图中,圆环里有很多游走不定的icon,实在让人不明白:分析一下,这里造成不明白的主要原因,是圆环里每个环的颜色都是100%填充的,所以那些圆形图标的位置就难以表达出百分比X%的意思,因此会引发疑惑。在AutoSleep里,创造了两个比较新颖的概念:看到「睡眠银行」,我的理解是今天睡的多了,可以存起来,明天就可以睡少点。不过。。。睡眠真的是可以像存钱一样存起来嘛。。。这和我平时的认知不太一样。
于是看了下应用里的说明,睡眠银行显示「您在睡眠需求方面的领先或者落后」。这种领先或者落后,是用X%的信用来表达的。说实话这个表达太难懂了。首先,X%的数字,让人难以get到底是多睡了多少。
其次,睡的比正常多,真的是好事吗?如果不是,界面里展现的是9.0%信用,感觉是睡得多积累了信用,这么看似乎是好事了。
这些概念,无法清晰表达出睡眠行为对健康的影响,从而干扰了用户的判断。再说「心率变异性分析」,这个名词看着就很专业,实际上对我的健康状态到底有啥用,应用里也没有任何地方有说明。以上两个拗口的新概念,增加了我理解界面的成本,阻碍了我对该应用里数据的理解。这些概念,应该用更容易理解的词语去表达。如果实在需要用专业名词,也应该给予清晰的解释。最近在读周陟老师的《设计的思考》,里面有句话很认同:核心任务和功能一定要简单,极致的简单会让用户降低防卫心理,优先使用。如果一个东西复杂,用户会从心理上抵抗反复使用,你产品的触达次数就会减少,没有触达率,品牌建设就是空谈。
要设计一个简单易懂的页面,有很多技巧。通过对两款睡眠监测软件的对比,总结一下有3点需要注意:
注意重点信息的提炼
使用合适的展现形式来展现数据
使用用户最能明白的概念传达信息
产品坟墓:字节又一产品关停
阿里这套B端营销设计方法,把用户心智拿捏得死死的